<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="applicable-device" content="mobile">
	<title>参加众筹</title>
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="css/addCrow.css">
</head>
<body>
	<div class="container">
		<div class="top-bar">
			<i class="top-left"></i>
            参加众筹
            <a href="myCrow.html">我的众筹</a>
        </div>

        <div class="list-item cl">
        	<dl class="cl">
        		<dt style="background:url('img/socks.png') no-repeat 50% 50%;background-size:cover;"></dt>
        		<dd class="title">淘宝爆款 夏季素色小清新纯色女船袜 短袜 袜子纯棉 袜子</dd>
        		<dd class="middle">
        			<span class="left">众筹价<em>￥<strong>5.68</strong></em></span>
        			<span class="right">20双起</span>
        		</dd>
        	</dl>
        </div>
        <div class="property">
        	<div class="metric" style="display:none;">双</div>
        	<div class="property-item">
        		<span class="title">颜色</span>
        		<div class="property-per">
        			<span class="active">红色</span>
        			<span>粉红色</span>
        			<span>橘红色</span>
        			<span>蓝色</span>
        			<span>黄色</span>
        			<span>白色</span>
        			<span>淡蓝色</span>
        		</div>
        	</div>
        
        	<div class="property-last">
        		<span class="title">尺码</span>
        		<div class="property-per">
        			<div class="property-one">
        				<span>S</span>
        				<div class="unit_amount">
                            <a href="javascript:void(0);" class="amount_down">-</a>
                            <input type="text" value="0" class="amount_input">
                            <a href="javascript:void(0);" class="amount_up">+</a>
                        </div>
        			</div>
        			<div class="property-one">
        				<span>L</span>
        				<div class="unit_amount">
                            <a href="javascript:void(0);" class="amount_down">-</a>
                            <input type="text" value="0" class="amount_input">
                            <a href="javascript:void(0);" class="amount_up">+</a>
                        </div>
        			</div>
        			<div class="property-one last">
        				<span>XL</span>
        				<div class="unit_amount">
                            <a href="javascript:void(0);" class="amount_down">-</a>
                            <input type="text" value="0" class="amount_input">
                            <a href="javascript:void(0);" class="amount_up">+</a>
                        </div>
        			</div>
        		</div>
        	</div>

	        <div class="choose">
	        	<span class="title">已选择</span>
	        	<div class="choose-ed">
	       		<table>
	       			<tbody>

					</tbody>
	        	</table>
	        	</div>
	        </div>

	       	<div class="promise">
	       		<i class="biao"></i>
	       		商家<a href="#">俊恒工艺</a>承诺众筹结束后的7天内发货。
	       	</div>
        </div>

		<div class="down-bar">
			<div class="price-bar">
				<span class="left"><strong>0</strong><em>双</em></span>
				<span class="right"><strong>0</strong>元</span>
			</div>
			<div class="add-bar">加入众筹</div>
		</div>
        
	</div>
	<script type="text/javascript" src="js/zepto.min.js"></script>
	<script type="text/javascript">
	$(function(){

		$('.property-per span').click(function(){
			var $proVal = '';
			$(this).addClass('active').siblings().removeClass('active');
			$('.property-item .property-per .active').each(function(){
						$proVal += $(this).text()+"&nbsp;&nbsp;";
			});
			$('.property-last .property-one .amount_input').val(0);
			$('.choose-ed tr').each(function(){
				if($(this).find(".pro").html() == $proVal){
					$(this).find('.pros em').each(function(){
						var $proLastVal = $(this).attr('data-pro'),
						$valNum=$(this).find('i').text();
						 $('.property-last .property-one').each(function(){
						 	if($proLastVal == $(this).find("span").text()){
						 		$(this).find('.amount_input').val($valNum);
						 	}					 	
						 });
					});
				}
			});

		});

		$('.amount_down').click(function(){
			var $input= $(this).parent().find('.amount_input');
			$choosed = $('.choose-ed tr'),
				$bool = false,
				$totalVal = 0,
				$proVal = '',
				$result = '<tr><td class="pro" width="25%">';		
				if($input.val() > 0){
					$input.val(parseInt($input.val())-1);
					var pro = $('.property-item .property-per .active').each(function(){
						$proVal += $(this).text()+"&nbsp;&nbsp;";
						$result += $(this).text()+"&nbsp;&nbsp;";
					})
					$result += '</td>';

					if($input.val() == 0){

						$('.amount_input').each(function(){
							$totalVal += parseInt($(this).val());
						});
						if($totalVal == 0){
							$choosed.each(function(){
								if($(this).find(".pro").html() == $proVal){
									$(this).remove();
								}
							});
						}else{
							$choosed.each(function(){
								if($(this).find(".pro").html() == $proVal){
									$bool = true;
									var $totalVald = 0,
										$pros = '';
									$input.parents('.property-per').find('.amount_input').each(function(){
										if($(this).val() != 0){
											$totalVald += parseInt($(this).val());
											$pros +='<em data-pro="'+$(this).parents('.property-one').find('span').text()+'">'+$(this).parents('.property-one').find('span').text()+'(<i>'+$(this).val()+'</i>)</em>';
										}							
									});

									$(this).find('.num strong').html($totalVald);
									$(this).find('.pros').html($pros);
								}
							})
						}
					}else{
						$choosed.each(function(){
								if($(this).find(".pro").html() == $proVal){
									$bool = true;
									var $totalVald = 0,
										$pros = '';
									$input.parents('.property-per').find('.amount_input').each(function(){
										if($(this).val() != 0){
											$totalVald += parseInt($(this).val());
											$pros +='<em data-pro="'+$(this).parents('.property-one').find('span').text()+'">'+$(this).parents('.property-one').find('span').text()+'(<i>'+$(this).val()+'</i>)</em>';
										}							
									});

									$(this).find('.num strong').html($totalVald);
									$(this).find('.pros').html($pros);
								}
							})
					}

				}
				totalNumber();
				totalPrice();
		});

		$('.amount_up').click(function(){
			var $input = $(this).parent().find('.amount_input'),
				$choosed = $('.choose-ed tr'),
				$bool = false,
				$proVal = '',
				$result = '<tr><td class="pro" width="25%">';		
				$input.val(parseInt($input.val())+1);
				$('.choose').show();
				if($input.val() > 0){
					var pro = $('.property-item .property-per .active').each(function(){
						$proVal += $(this).text()+"&nbsp;&nbsp;";
						$result += $(this).text()+"&nbsp;&nbsp;";
					})
					$result += '</td>';
				}

				$choosed.each(function(){
					if($(this).find(".pro").html() == $proVal){
						$bool = true;
						var $totalVal = 0,
							$pros = '';
						$input.parents('.property-per').find('.amount_input').each(function(){
							if($(this).val() != 0){
								$totalVal += parseInt($(this).val());
								$pros +='<em data-pro="'+$(this).parents('.property-one').find('span').text()+'">'+$(this).parents('.property-one').find('span').text()+'(<i>'+$(this).val()+'</i>)</em>';
							}							
						});

						$(this).find('.num strong').html($totalVal);
						$(this).find('.pros').html($pros);
					}
				})

				if($bool == false){
					var $totalValf = 0,
							$prosf = '';
						$input.parents('.property-per').find('.amount_input').each(function(){
							if($(this).val() != 0){
								$totalValf += parseInt($(this).val());
								$prosf +='<em data-pro="'+$(this).parents('.property-one').find('span').text()+'">'+$(this).parents('.property-one').find('span').text()+'(<i>'+$(this).val()+'</i>)</em>';
							}							
						});
						$result += '<td class="num"  width="25%"><strong>'+$totalValf+'</strong><em>'+$('.metric').text()+'</em></td>';
						$result += '<td class="pros"  width="50%">'+$prosf+'</td>';

						$('.choose-ed table tbody').append($result);
				}

			totalNumber();
			totalPrice();
		});

		$('.amount_input').change(function(){
			alert($(this).val());
		});

	});

	function totalNumber(){
		var $total = 0;
		$('.num strong').each(function(){
			$total +=parseInt($(this).text());
		});

		if($total == 0 ){
			$('.choose').hide();
		}

		$('.price-bar .left strong').text($total);
	}

	function totalPrice(){
		$('.price-bar .right strong').text((parseFloat($('.middle .left strong').text())*100*parseInt($('.price-bar .left strong').text())/100).toFixed(2));
	}
	</script>
</body>
</html>